<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { router } from "@/router";
import { get_scan_tactics } from "@/api/tactics";
import { add_schedule, search_schedule, task_search } from "@/api/task";
import { get_month_up_assets } from "@/api/asset";
import { message } from "@/utils/message";
import { tableDataStatic } from "./data";
defineOptions({
  name: "AssetUp",
});

import GatherSix from "../../gather/gathersix.vue";
import dayjs from "dayjs";
const formInline = reactive({
  policy_name: "",
  taskName: "",
  creater: "",
  task_id: "",
  ipscope: "",
  createTime: "",
  asset_name: "",
  exposure_asset_ip: "",
  open_port: "",
});

const formAddHardware = reactive({
  taskType: "",
  taskName: "",
  taskRegion: "",
  startTime: "", //启动时间
  linkTactics: "", //关联策略
  cron: "", //cron表达式
  monthDay: "",
  weekDay: "",
});

const addTaskFormRef = ref<FormInstance>();

const hardwareRules = reactive<FormRules>({
  taskName: [
    { required: true, message: "请输入任务名称", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
    // { validator: validatePass2, trigger: 'blur' }
  ],
  taskRegion: [
    {
      required: true,
      message: "请填写资产范围~",
      trigger: "blur",
    },
  ],
  taskType: [
    {
      required: true,
      message: "请选择一个任务类别",
      trigger: "change",
    },
  ],
  linkTactics: [
    {
      required: true,
      message: "请关联策略",
      trigger: "change",
    },
  ],
  startTime: [
    {
      // type: "array",
      required: true,
      message: "请选择日期区间",
      trigger: "change",
      // fields: {
      //   // tpye类型试情况而定,所以如果返回的是date就改成date,如果返回的是string就改成string
      //   0: { type: "date", required: true, message: "请选择开始日期" },
      //   1: { type: "date", required: true, message: "请选择结束日期" }
      // }
    },
  ],
});

const showAddHardwareDialog = ref(false);

const tableData = ref(tableDataStatic);

const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示的条数
const totalTabalData = ref(0); // 总条数

const tacticsList = ref([]);

const getMonthUpList = (param) => {
  get_month_up_assets({
    asset_name: formInline.asset_name,
    exposure_asset_ip: formInline.exposure_asset_ip,
    open_port: formInline.open_port,
    page: currentPage.value,
    per_page: pageSize.value,
  })
    .then((result) => {
      if (result.code === 2000) {
        tableData.value = result.data;
        totalTabalData.value = result.total;
      }
    })
    .catch((err) => {});
};

onMounted(() => {
  getMonthUpList();
});
</script>

<template>
  <div>
    <div class="">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <el-form
              :inline="true"
              :model="formInline"
              size="small"
              class="demo-form-inline"
              @submit.prevent
            >
              <el-form-item v-if="false">
                <el-button type="primary" @click="showAddHardwareDialog = true"
                  >新建任务</el-button
                >
              </el-form-item>

              <el-form-item label="资产名称">
                <el-input
                  v-model="formInline.asset_name"
                  placeholder="资产名称"
                  maxlength="30"
                  clearable
                  @keydown.enter="getMonthUpList"
                >
                  <template #append>
                    <el-button :icon="Search" @click="getMonthUpList" />
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="暴露面ip">
                <el-input
                  v-model="formInline.exposure_asset_ip"
                  placeholder="暴露面ip"
                  maxlength="30"
                  clearable
                  @keydown.enter="getMonthUpList"
                >
                  <template #append>
                    <el-button :icon="Search" @click="getMonthUpList" />
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="开放端口">
                <el-input
                  v-model="formInline.open_port"
                  placeholder="开放端口"
                  maxlength="30"
                  clearable
                  @keydown.enter="getMonthUpList"
                >
                  <template #append>
                    <el-button :icon="Search" @click="getMonthUpList" />
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary">批量删除</el-button>
              </el-form-item>
            </el-form>
          </div>
        </template>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="60" label="序号" />
          <!-- <el-table-column label="资产名称" prop="asset_name" width="130" /> -->
          <el-table-column label="资产名称" prop="asset_name" width="130">
            <template #default="rowscope">
              <div class="ellipsis">{{ rowscope.row.asset_name }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="暴露面资产IP"
            prop="exposure_asset_ip"
            width="250px"
          >
            <template #default="rowscope">
              <el-tag :key="0" class="mx-1" type="success" effect="plain">
                {{ rowscope.row.exposure_asset_ip }}
              </el-tag>
              <!-- <el-tag
                v-if="rowscope.row.scope && rowscope.row.scope.length > 1"
                :key="1"
                class="mx-1"
                type="success"
                effect="plain"
              >
                {{ rowscope.row.scope[1] }}
              </el-tag>
              <el-tag
                :key="2"
                v-if="rowscope.row.scope && rowscope.row.scope.length > 2"
                class="mx-1"
                type="success"
                effect="plain"
                >...</el-tag
              > -->
            </template>
          </el-table-column>

          <el-table-column label="开放端口" prop="open_port" />
          <el-table-column
            label="对应的内网映射ip地址"
            prop="internal_mapping_ip"
            width="200px"
          >
            <template #default="rowscope">
              <el-tag :key="0" class="mx-1" type="success" effect="plain">
                {{ rowscope.row.internal_mapping_ip }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="服务类型" prop="service_type" width="110" />
          <el-table-column label="资产类型" prop="asset_type" width="130" />
          <el-table-column label="资产标签" prop="asset_tag" width="130" />
          <el-table-column
            label="业务系统名称"
            prop="business_system_name"
            width="110px"
          />
          <el-table-column label="所属部门" prop="department" width="130" />
          <el-table-column
            label="负责人姓名"
            prop="person_in_charge_name"
            width="110"
          />
          <el-table-column
            label="负责人电话"
            prop="person_in_charge_phone"
            width="130"
          />
          <el-table-column
            label="负责人邮箱"
            prop="person_in_charge_email"
            width="180"
          />
          <el-table-column label="负载均衡Ip" prop="load_balancer_ip" />
          <el-table-column
            label="开放端口承载软件名称"
            prop="software_name"
            width="150px"
          />
          <el-table-column
            label="开放端口承载的软件版本"
            prop="software_version"
            width="150px"
          />
          <el-table-column
            label="Web应用访问地址"
            prop="web_application_url"
            width="130px"
          />
          <el-table-column label="访问方式" prop="access_method" />
          <el-table-column label="资产用途" prop="asset_purpose" />
          <el-table-column
            label="操作"
            width="200px"
            fixed="right"
            v-if="false"
          >
            <template #default="rowscope">
              <el-button size="small" type="success"> 暂停</el-button>
              <el-button size="small" class="el-btn-zese"> 恢复</el-button>
              <!-- type="primary" -->
              <el-button size="small" type="warning"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getMonthUpList"
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          v-model:page-size="pageSize"
          @size-change="getMonthUpList"
          layout="total, sizes, prev, pager,next"
          :total="totalTabalData"
          background
        />
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}
.gather-container {
  display: block;
  margin-bottom: 10px;
}

.min-w-input {
  width: 300px;
}

.el-btn-zese {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.el-btn-zese.is-disabled,
.el-btn-zese.is-disabled:focus,
.el-btn-zese.is-disabled:hover {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
